<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纸片化学 - 化学卡牌对战游戏</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Exo 2', sans-serif;
            background: linear-gradient(135deg, #0c1e3e, #1a3a5f, #2a4b8c);
            color: #fff;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        /* 粒子背景 */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
        }

        /* 头部样式 */
        header {
            text-align: center;
            padding: 3rem 0;
            position: relative;
        }

        .logo {
            font-family: 'Orbitron', sans-serif;
            font-size: 4.5rem;
            background: linear-gradient(to right, #ff7e5f, #feb47b, #76b6c4, #1da2d8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 20px rgba(29, 162, 216, 0.5);
            margin-bottom: 1rem;
            animation: glow 2s infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 10px rgba(29, 162, 216, 0.5); }
            to { text-shadow: 0 0 25px rgba(29, 162, 216, 0.8), 0 0 35px rgba(29, 162, 216, 0.6); }
        }

        .tagline {
            font-size: 1.5rem;
            color: #76b6c4;
            margin-bottom: 3rem;
            font-weight: 300;
        }

        /* 主内容区 */
        .main-content {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
            margin-bottom: 3rem;
        }

        .card {
            background: rgba(25, 40, 65, 0.7);
            border-radius: 15px;
            padding: 2rem;
            width: 100%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(118, 182, 196, 0.3);
            backdrop-filter: blur(10px);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }

        .card-title {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            color: #feb47b;
            text-align: center;
            position: relative;
        }

        .card-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            margin: 0.5rem auto;
            border-radius: 3px;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #76b6c4;
            font-weight: 600;
        }

        input {
            width: 100%;
            padding: 12px 15px;
            border-radius: 8px;
            border: 2px solid rgba(118, 182, 196, 0.5);
            background: rgba(15, 30, 50, 0.7);
            color: white;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        input:focus {
            outline: none;
            border-color: #1da2d8;
            box-shadow: 0 0 15px rgba(29, 162, 216, 0.5);
        }

        .btn {
            display: block;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: #0c1e3e;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: 0.5s;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 15px rgba(254, 180, 123, 0.4);
        }

        .btn:hover::before {
            left: 100%;
        }

        /* 游戏特点 */
        .features {
            text-align: center;
            margin: 4rem 0;
        }

        .section-title {
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: #feb47b;
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(to right, #ff7e5f, #1da2d8);
            border-radius: 2px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .feature-card {
            background: rgba(15, 30, 50, 0.6);
            border-radius: 15px;
            padding: 1.5rem;
            text-align: center;
            border: 1px solid rgba(118, 182, 196, 0.2);
            transition: all 0.3s;
        }

        .feature-card:hover {
            background: rgba(25, 40, 65, 0.8);
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 3rem;
            color: #1da2d8;
            margin-bottom: 1rem;
        }

        .feature-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: #feb47b;
        }

        .feature-desc {
            color: #a8c6d0;
            font-size: 0.95rem;
        }

        /* 元素动画 */
        .element {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            animation: float 8s infinite ease-in-out;
            opacity: 0.7;
        }

        .h { background: rgba(255, 126, 95, 0.2); top: 20%; left: 5%; animation-delay: 0s; }
        .o { background: rgba(29, 162, 216, 0.2); top: 65%; left: 10%; animation-delay: 1s; }
        .c { background: rgba(254, 180, 123, 0.2); top: 40%; left: 90%; animation-delay: 2s; }
        .n { background: rgba(118, 182, 196, 0.2); top: 75%; left: 85%; animation-delay: 3s; }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(10deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .logo {
                font-size: 3rem;
            }
            .tagline {
                font-size: 1.2rem;
            }
            .card {
                padding: 1.5rem;
            }
            .card-title {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <!-- 粒子背景 -->
    <div class="particles" id="particles"></div>

    <!-- 漂浮元素 -->
    <div class="element h">H</div>
    <div class="element o">O</div>
    <div class="element c">C</div>
    <div class="element n">N</div>

    <div class="container">
        <header>
            <h1 class="logo">CHEMISTRY CARDS</h1>
            <p class="tagline">使用化学知识进行卡牌对战 - 成为实验室的最终胜者！</p>
        </header>

        <div class="main-content">
            <!-- 创建房间 -->
            <div class="card">
                <h2 class="card-title">创建房间</h2>
                <div class="form-group">
                    <label for="teacher-name"><i class="fas fa-user"></i> 您的昵称</label>
                    <input type="text" id="teacher-name" placeholder="化学老师">
                </div>
                <button id="create-room" class="btn">
                    <i class="fas fa-flask"></i> 成为化学老师
                </button>
            </div>

            <!-- 加入房间 -->
            <div class="card">
                <h2 class="card-title">加入房间</h2>
                <div class="form-group">
                    <label for="player-name"><i class="fas fa-user"></i> 您的昵称</label>
                    <input type="text" id="player-name" placeholder="实验室学徒">
                </div>
                <div class="form-group">
                    <label for="room-id"><i class="fas fa-door-open"></i> 房间ID</label>
                    <input type="text" id="room-id" placeholder="输入房间ID">
                </div>
                <button id="join-room" class="btn">
                    <i class="fas fa-vial"></i> 加入游戏
                </button>
            </div>
        </div>

        <!-- 游戏特点 -->
        <div class="features">
            <h2 class="section-title">游戏特点</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-atom"></i>
                    </div>
                    <h3 class="feature-title">真实的化学元素</h3>
                    <p class="feature-desc">使用真实的化学元素、酸根和反应条件卡牌进行游戏</p>
                </div>

                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-vial"></i>
                    </div>
                    <h3 class="feature-title">化学反应机制</h3>
                    <p class="feature-desc">组合元素合成化合物，进行化学反应创造新物质</p>
                </div>

                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="feature-title">攻防策略</h3>
                    <p class="feature-desc">使用化学物质攻击对手，利用稀有气体或水进行防御</p>
                </div>

                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="feature-title">化学老师审核</h3>
                    <p class="feature-desc">所有化学反应由化学老师审核，确保化学原理正确</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 粒子背景效果
        function createParticles() {
            const container = document.getElementById('particles');
            const particleCount = 50;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');

                // 随机位置和大小
                const size = Math.random() * 6 + 2;
                const posX = Math.random() * 100;
                const posY = Math.random() * 100;

                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${posX}%`;
                particle.style.top = `${posY}%`;

                // 动画延迟
                particle.style.animation = `float ${Math.random() * 10 + 10}s infinite ease-in-out`;
                particle.style.animationDelay = `${Math.random() * 5}s`;

                container.appendChild(particle);
            }
        }

        // 初始化Socket.IO连接
        const socket = io();

        // 创建房间（成为化学老师）
        function createRoom() {
            const name = document.getElementById('teacher-name').value || '化学老师';

            // 发送创建房间请求
            socket.emit('create_room', { name }, (response) => {
                if (response.success) {
                    // 保存用户信息到sessionStorage
                    sessionStorage.setItem('player', JSON.stringify({
                        sid: socket.id,
                        name: name,
                        isTeacher: true,
                        roomId: response.room_id
                    }));

                    // 重定向到化学老师页面
                    window.location.href = `/teacher/${response.room_id}`;
                } else {
                    alert(`创建房间失败: ${response.message}`);
                }
            });
        }

        // 加入房间（成为普通玩家）
        function joinRoom() {
            const name = document.getElementById('player-name').value || '实验室学徒';
            const roomId = document.getElementById('room-id').value;

            if (!roomId) {
                alert('请输入房间ID');
                return;
            }

            // 发送加入房间请求
            socket.emit('join_room', { name, room_id: roomId }, (response) => {
                if (response.success) {
                    // 保存用户信息到sessionStorage
                    sessionStorage.setItem('player', JSON.stringify({
                        sid: socket.id,
                        name: name,
                        isTeacher: false,
                        roomId: roomId
                    }));

                    // 重定向到游戏页面
                    window.location.href = `/game/${roomId}`;
                } else {
                    alert(`加入房间失败: ${response.message}`);
                }
            });
        }

        // 重新连接处理
        function reconnectToRoom() {
            const playerData = sessionStorage.getItem('player');
            if (!playerData) return;

            const player = JSON.parse(playerData);
            socket.emit('connect_to_room', {
                room_id: player.roomId,
                is_teacher: player.isTeacher
            }, (response) => {
                if (response.success) {
                    // 更新sid
                    player.sid = socket.id;
                    sessionStorage.setItem('player', JSON.stringify(player));

                    // 通知客户端连接成功
                    socket.emit('my_sid', socket.id);
                } else {
                    alert(`重新连接失败: ${response.message}`);
                }
            });
        }

        // 事件监听
        document.addEventListener('DOMContentLoaded', () => {
            // 绑定按钮事件
            document.getElementById('create-room')?.addEventListener('click', createRoom);
            document.getElementById('join-room')?.addEventListener('click', joinRoom);

            // Socket.IO事件处理
            socket.on('connect', () => {
                console.log('已连接到服务器');

                // 尝试重新连接到之前的房间
                reconnectToRoom();
            });

            socket.on('disconnect', () => {
                console.log('与服务器断开连接');
            });

            socket.on('error', (error) => {
                console.error('Socket错误:', error);
                alert(`发生错误: ${error.message}`);
            });

            // 接收房间创建成功的回调
            socket.on('room_created', (data) => {
                // 保存用户信息到sessionStorage
                sessionStorage.setItem('player', JSON.stringify({
                    sid: socket.id,
                    name: data.name,
                    isTeacher: true,
                    roomId: data.room_id
                }));

                // 重定向到化学老师页面
                window.location.href = `/teacher/${data.room_id}`;
            });

            // 接收加入房间成功的回调
            socket.on('joined_room', (data) => {
                // 重定向到游戏页面
                window.location.href = `/game/${data.room_id}`;
            });
        });

        // 初始化粒子效果
        createParticles();

    </script>
</body>
</html>